import { Status } from './type'
import { GLOBAL_STATUS } from './status'
import { Header } from './Header'
import { Content } from './Content'
import { Footer } from './Footer'
import { createSignal, onMount } from 'solid-js'
import { getPlayList } from '../../utils/list'
import { getPlayer } from '../../utils/player'

export const Panel = () => {
  const [status, setStatus] = createSignal<Status>(
    { list: [], title: '自动刷视频 V2' },
  )
  const [minimal, setMinimal] = createSignal<boolean>(false)
  const updateSnapshot = () => {
    const list = getPlayList()
    setStatus?.({ ...status(), list })
    const player = getPlayer()
    console.log(player)
  }

  onMount(updateSnapshot)

  return (<GLOBAL_STATUS.Provider value={{
    status,
    setStatus,
    updateSnapshot,
    minimal,
    setMinimal,
  }}>
    <Header/>
    <Content/>
    <Footer/>
  </GLOBAL_STATUS.Provider>)
}
